<template>
  <f7-app :params="f7params">
    <!-- Status bar overlay for fullscreen mode-->
    <f7-statusbar></f7-statusbar>

    <!-- Left panel with cover effect-->
    <f7-panel left cover theme-dark>
      <f7-view>
        <f7-page>
          <f7-navbar title="Left Panel"></f7-navbar>
          <f7-block>Left panel content goes here</f7-block>
        </f7-page>
      </f7-view>
    </f7-panel>


    <!-- Right panel with reveal effect-->
    <f7-panel right reveal theme-dark>
      <f7-view>
        <f7-page>
          <f7-navbar title="Right Panel"></f7-navbar>
          <f7-block>Right panel content goes here</f7-block>
        </f7-page>
      </f7-view>
    </f7-panel>


    <!-- Your main view, should have "view-main" class -->
    <f7-view main class="safe-areas" url="/"></f7-view>


    <!-- Popup -->
    <f7-popup id="my-popup">
      <f7-view>
        <f7-page>
          <f7-navbar title="Popup">
            <f7-nav-right>
              <f7-link popup-close>Close</f7-link>
            </f7-nav-right>
          </f7-navbar>
          <f7-block>
            <p>Popup content goes here.</p>
          </f7-block>
        </f7-page>
      </f7-view>
    </f7-popup>

    <f7-login-screen id="my-login-screen">
      <f7-view>
        <f7-page login-screen>
          <f7-login-screen-title>Login</f7-login-screen-title>
          <f7-list form>
            <f7-list-input
                type="text"
                name="username"
                placeholder="Your username"
                :value="username"
                @input="username = $event.target.value"
            ></f7-list-input>
            <f7-list-input
                type="password"
                name="password"
                placeholder="Your password"
                :value="password"
                @input="password = $event.target.value"
            ></f7-list-input>
          </f7-list>
          <f7-list>
            <f7-list-button title="Sign In" login-screen-close
                            @click="alertLoginData"></f7-list-button>
            <f7-block-footer>
              Some text about login information.<br>Click "Sign In" to close
              Login Screen
            </f7-block-footer>
          </f7-list>
        </f7-page>
      </f7-view>
    </f7-login-screen>
  </f7-app>
</template>
<script>
  import cordovaApp from '../js/cordova-app.js';
  import routes from '../js/routes.js';

  import Log from '../mod/log'
  import Alert from '../mod/alert'
  import Toast from '../mod/toast'
  import Axios from 'axios/dist/axios.min.js';
  import Storage from '../mod/storage';
  import Popover from '../mod/popover';

  import Picker from '../mod/picker';
  import Popup from '../mod/popup';

  export default {
    data() {
      return {
        // Framework7 Parameters
        f7params: {
          id: 'top.jnaw.oa', // App bundle ID
          name: 'OA', // App name
          theme: 'auto', // Automatic theme detection
          view: {
            iosDynamicNavbar: false, // 禁用 ios 端动态 navbar 功能
          },
          // App root data
          data: function () {
            return {
              user: {
                firstName: 'John',
                lastName: 'Doe',
              },

              platform: 'web',

              axios: Axios,

              f7App: null,

              name: '',
              from: 'wechat',
              model: '',
              openid: '',
              code: '',
              userinfo: {},
              department: {},

              history: [],
            };
          },

          // App routes
          routes: routes,

          // Input settings
          input: {
            scrollIntoViewOnFocus: !!this.$device.cordova,
            scrollIntoViewCentered: !!this.$device.cordova,
          },

          // Cordova Statusbar settings
          statusbar: {
            overlay: this.$device.cordova && this.$device.ios || 'auto',
            iosOverlaysWebView: true,
            androidOverlaysWebView: false,
          },
          on: {
            routeChanged: this.onRouteChanged,
          },
        },

        // Login screen data
        username: '',
        password: '',
      }
    },

    methods: {
      alertLoginData() {
        this.$f7.dialog.alert(
            'Username: ' + this.username + '<br>Password: ' + this.password);
      },
      // 路由更换
      onRouteChanged(newRoute, pervRoute, router) {
        let _this = this;
        let curPagePath = newRoute.path;
        let history = router.history;
        // [Neo] current route changed after page transitions
        console.log('History: ', router.history);

        _this.$f7.data.history = router.history || [];
      },
    },

    mounted() {
      this.$f7ready((f7) => {
        var _this = this;
        // Init cordova APIs (see cordova-app.js)
        if (f7.device.cordova) {
          cordovaApp.init(f7);
        }
        _this.$f7.data.f7App = f7;

        Log.init(f7)
        Alert.init(f7)
        Toast.init(f7)
        Picker.init(f7);
        Storage.init(f7);
        Popover.init(f7);
        Popup.init(f7);

        // Call F7 APIs here
      });
    },

  }
</script>